@import '../../../var.scss';
page {
  background-color: $page-background-color;
}
.header {
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  .search {
    display: flex;
    align-items: center;
    width: 100%;
    height: 54rpx;
    padding: 0 30rpx;
    background-color: $page-background-color;
    border-radius: 12rpx;
    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 15rpx;
    }
  }
}
.marginTop20 {
  margin-top: 20rpx;
}
.section {
  width: 100%;
  height: 100%;
  padding: 20rpx;
  background-color: #fff;
  .list {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    .left {
      color: $title-color;
      font-size: 28rpx;
      text {
        margin-left: 20rpx;
        color: $info-color;
      }
    }
    image {
      width: 35rpx;
      height: 39rpx;
    }
  }
  .lists {
    display: flex;
    align-items: center;
    width: 680rpx;
    height: 80rpx;
    margin-left: 10rpx;
    border-bottom: 1rpx solid $border-color;
  }
}
.title {
  height: 60rpx;
  padding: 0 20rpx;
  color: $info-color;
  font-size: 26rpx;
  line-height: 60rpx;
}
.type {
  display: grid;
  grid-gap: 30rpx 30rpx;
  grid-template-columns: repeat(auto-fill, 150rpx);
  width: 100%;
  margin-top: 20rpx;
  .item {
    width: 150rpx;
    height: 60rpx;
    color: $title-color;
    font-size: 28rpx;
    line-height: 60rpx;
    text-align: center;
    background-color: $bgcolor-gray;
    border-radius: 8rpx;
  }
  .active {
    color: $primary-color;
    background-color: rgba($color: $primary-color, $alpha: 0.15);
  }
}
